<template>
  <div
    style="display: flex; flex-direction: column;align-items: center; min-width: 150px;min-height: 340px;max-height: 340px;border: 2px solid #153271;"
    :style="{ backgroundColor: getBgColor(juanXin, jieBangBtn) }">
    <span style="font-size: 28px;color: black;">{{ kuWei?.KuweiId }}</span>
    <!-- :style="{ color: juanXin?.sNstatus == '计时中' ? 'blue' : 'green' }" -->
    <span style="font-size: 20px;font-weight: 700;color: black;">
      {{ getStatus() }}
    </span>
    <!-- v-if="juanXin?.sNstatus == '计时中'" style="color: blue;text-align: center;" -->
    <span v-if="juanXin?.sNstatus == '计时中'" style="color: black;text-align: center;">
      {{ countdown }}
    </span>
    <el-button v-if="jieBangBtn" style="width: 100px;" type="danger" round>待解绑</el-button>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNone }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNtwo }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNthree }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNfour }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNfive }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNsix }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNseven }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNeight }}</span>
    <span style="color:black;font-size: 20px;">{{ juanXin?.sNnine }}</span>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps } from 'vue';


// 使用 defineProps 来定义组件的 props
const props = defineProps({
  kuWei: {
    type: Object,
    required: true
  },
  juanXin: {
    type: Object,
  },
  countdown: {
    type: String,
  },
  jieBangBtn: {
    type: Boolean,
  }
})

const getStatus = () => {
  if (props.jieBangBtn) {
    return '计时完成'
  }

  return props.juanXin?.sNstatus || props.kuWei?.kuweiStatus
}

const getBgColor = (juanXin, jieBangBtn) => {
  if (!juanXin) {
    // 空闲
    return '#fff'
  }

  if (jieBangBtn) {
    // 可解绑
    return 'rgb(95 217 95)'
  }

  // 计时中
  return '#2c2ce0'
}

</script>

<style scoped></style>
